<template>
    <div>
        <!-- 头部 -->
        <div class="top_tab1">
            <div class="left1" @click="back()">
                <img  src="../assets/order_center/shangs.png">
            </div>
            <span>购买挂牌鸿包</span>
            <div class="right1">
            </div>
        </div>
        <div class="n"></div>
        <div class="shintabti">
            <div class="shinkjy">
                <div>可交易鸿包</div>
                <div>{{ye}}</div>
            </div>
            <div class="shinkjy">
                <div>鸿包单价：</div>
                <div>{{meifen}}</div>
            </div>
            <div class="shinkjy">
                <div>购买数量：</div>
                <div><input type="number" v-model="num" placeholder="输入购买数量(输入整数)"></div>
            </div>
            <div class="shinkjybtn">
                <div class="shinqueren" @click="isOk()">确认</div>
                <div class="shinquxiao" @click="back()">取消</div>
            </div>
        </div>
        <yd-popup v-model="show4" position="bottom" height="30%">
            <div class="pddi">
              <p class="zhifu"><span>支付金额：</span> <span>￥{{num*meifen}}</span></p>
              <div class="lzhi" @click="pays()">立即支付</div>
            </div>
        </yd-popup>


        <yd-keyboard v-model="show1" :callback="done1" ref="keyboardDemo1"></yd-keyboard>

    </div>
</template>
<script>
import Vue from 'vue';
import {KeyBoard} from 'vue-ydui/dist/lib.rem/keyboard';
Vue.component(KeyBoard.name, KeyBoard);
export default {
  name: "shingle",
  data() {
    return {
      num:'',
      show4:false,
      show1:false,
      safepassword:''
    };
  },
  methods: {
 
    done1(val) {
        console.log('输入的密码是：' + val);
        this.$dialog.loading.open('验证支付密码'); 
        if(val == this.safepassword){
           this.$dialog.loading.close();
           this.show1 = false
           this.show4 = false
           this.pay()
        }else{
          this.$refs.keyboardDemo1.$emit('ydui.keyboard.error', '对不起，您的支付密码不正确，请重新输入。');
          this.$dialog.loading.close();
        }
    },
 
    back: function() {
      this.$router.go(-1);
    },
    isOk(){
       if(!(/(^[1-9]\d*$)/.test(this.num))){
        this.$dialog.toast({
            mes: '请输入正确购买数量！',
            timeout: 1500
        });
        return
       } 
      this.show4=true;
    },
    pays(){
      let self = this;
      let url = "/api/safepwd"; 
      self.orderList=[];
			self.httpPost(url,{user_id:this.user_id,token:this.token},function(res) {
				if (res.code == 200) {   
            if(res.data == 1){
              self.show1 = true
            }else{
              self.$dialog.toast({
                  mes: '请设置安全密码！',
                  timeout: 1500
              });
               setTimeout(() => {
                    self.$router.push("/ChangePassword");
                }, 1000);
            }
				}else{
           alert(res.msg)
				} 
      })
    },
    pay(){ 
      let self = this;
      let url = "/api/shopping/redbagOrder/sale"; 
      self.orderList=[];
			self.httpPost(url,{user_id:this.user_id,token:this.token,type:3,redbag_saleId:this.id,redbag_num:this.num},function(res) {
				if (res.code == 200) {   
             setTimeout(() => {
                        window.location.href = 'http://hbh.dev.whbpkj.com/wx/pay/' + res.data;
            }, 500);
				}else{
           alert(res.msg)
				} 
      })
    },
          //获取用户资料
    detail: function() {
      let self = this;
      let url = "/api/login/detail";
      self.httpPost(url, { user_id: this.user_id, token: this.token }, function(
        res
      ) {
        if (res.code === 200) {
          self.safepassword =res.data.safepassword
          console.log(self.safepassword)
        } 
      });
    },
  },
  created(){
    this.user_id = localStorage.getItem('myid');
    this.token = localStorage.getItem('mytoken'); 
    this.id = this.$route.query.id ;
    this.ye = this.$route.query.ye ;
    this.meifen = this.$route.query.meifen;
    this.detail()
  } 
};
</script>
<style>
.lzhi{
  height: .7rem;
  width: 5rem;
  margin: 0 auto;
  line-height: .7rem;
  text-align: center;
  border-radius: 20px;
  background: #F73131;
  margin-top: 2rem;
  font-size: .32rem;
  color: #fff;
}
.zhifu{
  display: flex;
  justify-content: space-between;
  font-size: .32rem;
}
.zhifu>span:nth-child(2){
  color: red;
}
.pddi{
  padding: .3rem;
}
.top_tab1 {
  width: 100%;
  padding: 0.2rem 0.3rem;
  background: #fff;
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0.01rem 0.01rem 0.06rem #ddd;
}
.top_tab1 span {
  color: #333;
  font-size: 0.36rem;
  padding-left: 0.8rem;
}
.top_tab1 .right1 {
  width: 1rem;
  display: flex;
  justify-content: space-between;
}
.top_tab1 img {
  width: 0.43rem;
}
.n {
  height: 0.9rem;
}
.shintabti {
  padding: 0 0.3rem;
  background: #fff;
}
.shinkjy {
  height: 1.08rem;
  line-height: 1.08rem;
  font-size: 0.3rem;
  color: #333;
  display: flex;
  border-bottom: 1px solid #ddd;
}
.shinkjy > div:first-child {
  width: 30%;
}
.shinkjy input {
  border: none;
}
.shinkjybtn {
  height: 1.08rem;
  line-height: 1.08rem;
  display: flex;
  justify-content: center;
}
.shinkjybtn > div {
  width: 1.2rem;
  height: 0.6rem;
  text-align: center;
  line-height: 0.6rem;
  border-radius: 0.1rem;
  font-size: 0.25rem;
  margin: auto 0.3rem;
}
.shinqueren {
  color: #fff;
  background: #e63f3f;
}
.shinquxiao {
  color: #999;
  background: #ddd;
}
</style>

